<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 后台管理开发框架</title>
    <link href="/favicon.ico" rel="icon">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/asset/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="/asset/css/style.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<link href="/asset/css/theme.css" rel="stylesheet" type="text/css" />
<div class="layui-fluid layui-bg-white layui-form" >

    <div class="layui-card">
        <div class="layui-card-header">风格设置</div>
        <div class="layui-card-body">
            <div class="drawer-item" lay-style="light" >
                <img src="/asset/images/light.svg" lay-tips="亮色系风格" lay-offset="1" alt="light">
            </div>
            <div class="drawer-item"  lay-style="dark">
                <img src="/asset/images/dark.svg" lay-tips="暗色系风格" lay-offset="1" alt="dark">
            </div>
            <!--div class="drawer-item" lay-style="black">
                <img src="/asset/images/black.svg" lay-tips="暗黑模式" lay-offset="1" alt="black">
            </div-->
        </div>

        <div class="layui-card-header">主题配色</div>
        <div class="layui-card-body" >
            <div class="theme-item layui-bg-blue" 	lay-theme="blue"  	lay-color="#2d8cf0" lay-tips="拂晓蓝" lay-offset="1" ></div>
            <div class="theme-item layui-bg-red"  	lay-theme="firered" lay-color="#f56c6c"	lay-tips="火山红" lay-offset="1" ></div>
            <div class="theme-item layui-bg-orange" lay-theme="orange"  lay-color="#f6ad55" lay-tips="日暮" lay-offset="1" ></div>
            <div class="theme-item layui-bg-green"  lay-theme="green"  	lay-color="#36b368" lay-tips="极光绿" lay-offset="1" ></div>
            <div class="theme-item " style="background: #32A2D4" lay-theme="geek" lay-color="#3963bc"  lay-tips="极客蓝" lay-offset="1" ></div>
            <div class="theme-item layui-bg-cyan"  lay-theme="cyan"  	lay-color="#28333E" lay-tips="藏青色" lay-offset="1" ></div>
        </div>

        <div class="layui-clear"></div>

        <div class="layui-card-header">导航模式</div>
        <div class="layui-card-body" >
            <div class="drawer-menu" lay-nav="left" ><img src="/asset/images/dark.svg" lay-tips="左侧菜单布局" lay-offset="1" alt="left"></div>
            <div class="drawer-menu" lay-nav="top" ><img src="/asset/images/top.svg" lay-tips="顶部菜单布局" lay-offset="1"  alt="top"></div>
            <div class="drawer-menu" lay-nav="hybrid" ><img src="/asset/images/hybrid.svg" lay-tips="混合菜单布局" lay-offset="1" alt="hybrid"></div>
        </div>

        <div class="layui-card-body layui-form">

            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>内容区域宽度</label>
                <div class="layui-input-inline"  >
                    <select class="layout" lay-filter="layout" >
                        <option value="fluid">fluid</option>
                        <option value="fixed">fixed</option>
                    </select>
                </div>
            </div>

            <!--div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>系统语言包</label>
                <div class="layui-input-inline"  >
                    <select class="language" lay-filter="language" >
                        <option value="zh-cn">中文</option>
                        <option value="en-us">English</option>
                    </select>
                </div>
            </div-->

            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>菜单下拉样式</label>
                <div class="layui-input-inline" >
                    <div class="layui-input-inline"  >
                        <select class="dropstyle" lay-filter="dropstyle" >
                            <option value="arrow2">默认</option>
                            <option value="arrow1">三角</option>
                            <option value="arrow3">加号</option>
                        </select>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" >
                <legend>其他设置</legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>路由动画</label>
                <div class="layui-input-inline ">
                    <input type="checkbox"  lay-filter="router" lay-skin="switch" checked  />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>开启多标签</label>
                <div class="layui-input-inline">
                    <input type="checkbox" class="pageTabs" lay-filter="pageTabs" lay-skin="switch" checked  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>开启页头</label>
                <div class="layui-input-inline ">
                    <input type="checkbox"  class="openheader" lay-filter="openheader" lay-skin="switch" checked  />
                </div>
            </div>
            <!--div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>开启页脚</label>
                <div class="layui-input-inline ">
                    <input type="checkbox"  class="openfooter" lay-filter="openfooter"  lay-skin="switch" checked  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">* </font>开启色弱模式</label>
                <div class="layui-input-inline ">
                    <input type="checkbox"  class="colormodel" lay-filter="colormodel" lay-skin="switch" checked  disabled />
                </div>
            </div-->
        </div>
    </div>
</div>
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script>
    layui.use(['admin'], function () {
        var $ = layui.jquery;
        var html = '<i class="layui-icon layui-icon-ok"></i>';
        // 风格选择
        var style = layui.admin.getStorage('style');
        (typeof style === "undefined") && (style = 'dark');
        $('*[lay-style='+ style +']').append(html);
        $('.drawer-item').click(function(obj) {
            $('.drawer-item>.layui-icon-ok').remove();
            $(this).append(html);
            var stylesheet = $(this).attr('lay-style')
                ,css = layui.admin.getStyleCss();
            if (stylesheet == 'light' && stylesheet != layui.admin.getStorage('style')) {
                top.layui.$('head').append(css);

            }else if (stylesheet == 'dark') {
                top.layui.$('#style-light').remove();
            }else {
                layui.iziToast.error({
                    message: 'noting',
                });
                return false;
            }
            layui.admin.setStorage('style',stylesheet);
        })

        // 主题选择
        var laytheme = layui.admin.getStorage('theme');
        (typeof laytheme === "undefined") && (laytheme = 'blue');
        $('*[lay-theme='+ laytheme +']').append(html);
        $('body').attr('id',laytheme);
        $('.theme-item ').click(function(obj) {
            $('.theme-item>.layui-icon-ok').remove();
            $(this).append(html);
            var color = $(this).attr('lay-color');
            layui.admin.setStorage('theme-color-color',color);
            layui.admin.setStorage('theme-color-second',color);

            var theme = $(this).attr('lay-theme');
            $('body').attr('id',theme);
            layui.admin.setStorage('theme',theme);
            layui.admin.setTheme();

            //layui.theme.changeTheme(window,false);
        })

        // 导航选择
        var nav = layui.admin.getStorage('nav');
        (typeof nav === "undefined") && (nav = 'left');
        $('*[lay-nav='+ nav +']').append(html);
        $('.drawer-menu').click(function(obj) {
            $('.drawer-menu>.layui-icon-ok').remove();
            $(this).append(html);
            var menu = $(this).attr('lay-nav');
            // 顶部混合菜单关闭单页面
            if (menu === 'top' || menu == 'hybrid') {
                layui.admin.setConfig("TabLists");
                layui.admin.setConfig("activeTab");
                layui.admin.setStorage('pageTabs',true);
            }

            layui.admin.setStorage('nav', menu);
            top.location.reload();
        })

        // 内容系统区域
        var layout = layui.admin.getStorage('layout');
        if (typeof layout !== "undefined") {
            layui.each($('.layout').children('option'),function(index,elem) {
                if ($(elem).val() == layout) {
                    $(elem).attr("selected",true);
                }
            })
        }

        layui.form.on('select(layout)',function(obj) {
            layui.admin.setStorage('layout',obj.value);
            layui.admin.setlayFluid();
        })

        // 选择语言包 language
        var language = layui.admin.getStorage('language');
        if (typeof language !== "undefined") {
            layui.each($('.language').children('option'),function(index,elem) {
                if ($(elem).val() == language) {
                    $(elem).attr("selected",true);
                }
            })
        }
        layui.form.on('select(language)',function(obj) {
            layui.admin.setStorage('language',obj.value);
            layui.admin.event.getAjaxData("{:url('/system.admin/language')}?l=" + obj.value);
            layui.admin.setConfig("TabLists");
            layui.admin.setConfig("activeTab");
            top.location.reload();
        })

        // 菜单下拉样式
        var dropstyle = layui.admin.getStorage('dropstyle');
        if (typeof dropstyle !== "undefined") {
            layui.each($('.dropstyle').children('option'),function(index,elem) {
                if ($(elem).val() == dropstyle) {
                    $(elem).attr("selected",true);
                }
            })
        }
        layui.form.on('select(dropstyle)',function(obj) {
            layui.admin.setStorage('dropstyle',obj.value);
            layui.admin.setDropStyle();
        })

        // 路由动画
        layui.form.on('switch(router)',function(obj) {
            layui.iziToast.info({
                message: '系统已经内置loading',
            });
        })

        // 多标签选项卡
        var pageTabs = layui.admin.getStorage('pageTabs');
        $('.pageTabs').prop('checked', pageTabs == undefined ? top.layui.admin.pageTabs : pageTabs);
        layui.form.on('switch(pageTabs)',function(obj) {
            var nav = layui.admin.getStorage('nav')
            if (nav === 'top' || nav == 'hybrid') {
                $(".pageTabs").prop("checked", true);
                layui.form.render();
                layui.iziToast.error({
                    message: '当前菜单布局不支持该操作！',
                });
                return false;
            }

            pageTabs = (pageTabs == false) ? true : false;
            layui.admin.setStorage('pageTabs',pageTabs);

            // 刷新配置
            layui.admin.setStorage('nav','left');
            layui.admin.setConfig("TabLists");
            layui.admin.setConfig("activeTab");
            top.location.reload();
        })

        // 开启页头
        var openheader = layui.admin.getStorage('openheader');
        $('.openheader').prop('checked', openheader == undefined ? true : openheader);
        layui.form.on('switch(openheader)',function(obj) {
            // 你肯定发现了这里，那么请使用SHIFT+P键呼出配置！
            if (typeof(openheader) === "undefined") {
                openheader = false;
            }else {
                openheader = (openheader == false) ? true : false;
            }
            layui.admin.setStorage('openheader',openheader);
            layui.admin.setOpenHeader();
        })
        // 开启页脚
        var openfooter = layui.admin.getStorage('openfooter');
        $('.openfooter').prop('checked', openfooter == undefined ? true : openfooter);
        layui.form.on('switch(openfooter)',function(obj) {
            if (typeof(openfooter) === "undefined") {
                openfooter = false;
            }else {
                openfooter = (openfooter == false) ? true : false;
            }
            layui.admin.setStorage('openfooter',openfooter);
            layui.admin.setOpenFooter();
        })

        // 色弱模式
        var colormodel = layui.admin.getStorage('colormodel');
        $('.colormodel').prop('checked', colormodel == undefined ? true : colormodel);
        layui.form.on('switch(colormodel)',function(obj) {
            if (typeof(colormodel) === "undefined") {
                colormodel = false;
            }else {
                colormodel = (colormodel == false) ? true : false;
            }
            layui.admin.setStorage('colormodel',colormodel);
            layui.admin.setColorModel();
        })
        layui.form.render('checkbox');
        layui.form.render('select');
    })
</script>